import moveEvent from '@/util/moveEvent';

const bandObject = function (obj, key, setClassback) {
    let data = obj[key];
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            return data;
        },
        set: function (v) {
            data = v;
            setClassback(data);
        }
    });
};

class viewObject {
    constructor(options, viewer, status) {
        this.options = $.extend({}, {
            basic: {},
            style: {},
            event: {},
        }, options || {});
        this.basic = $.extend({}, {
            id: icu.util.uuid(),
            name: '块元素',
            icon: 'fa-square',
            commonStyle: [],
            position: {
                left: 'auto',
                top: 'auto',
            },
            size: {
                width: 100,
                height: 100,
            },
            content: 'TEST',
            opacity: 1,
        }, this.options.basic);
        this.style = $.extend({}, {
            border: {
                status: false,
                width: 1,
                radius: 0,
                type: 'solid',
                showStatus: [true, true, true, true],
                color: [0, 0, 0, 1],
                padding: [0, 0, 0, 0],
                margin: [0, 0, 0, 0],
                boxShadow: {
                    status: false,
                    type: 'outSet',
                    X: '0px',
                    Y: '0px',
                    color: [0, 0, 0, 1]
                },
                overflow: false,
            },
            background: {
                img: {
                    src: '',
                    size: '',
                    position: [0, 0],
                    repeat: true,
                },
                color: [0, 0, 0, 0],
            },
            text: {
                color: [0, 0, 0, 0],
                fontSize: false,
                lineHeight: false,
                textAlign: 'left',
                textIndent: 0,
            },
            effect: {
                cloudedGlass: false,
            },
        }, this.options.style);
        this.event = $.extend({}, {
            load: function () { },
            click: function () { },
            dblClick: function () { },
            rightClick: function () { },
        }, this.options.event);
        this.viewObject = viewer;
        this.status = status;
        this.selectLineStatus = true;
        this.$el = $(`<div class="viewObject-block"><div class="viewObject-content"></div><div class="viewObject-selectLine"></div><div class="viewObject-SelectView"></div></div>`);
        this.el = {
            html: this.$el,
            content: this.$el.find('.viewObject-content'),
            selectLine: this.$el.find('.viewObject-selectLine'),
            SelectView: this.$el.find('.viewObject-SelectView'),
        };
        this.Objects = null;
        this.init();
        this.bindMoveEvent();
        this.el.selectLine.hide();
        this.el.SelectView.click((e) => {
            e.stopPropagation();
            this.status.setSelectObject(this);
        });
    }
    viewObjectForm() {
        var __FormOptions = [{
            name: '基本属性',
            html: '<div>基本属性</div>',
        }, {
            name: '样式属性',
            html: '<div>基本属性</div>',
        }, {
            name: '特效',
            html: '<div>特效</div>',
        }, {
            name: '方法',
            html: '<div>方法</div>',
        }];
        return __FormOptions;
    }
    bindMoveEvent() {
        this.el.selectLine.append(`
            <div class="viewObject-mark left top"></div>
            <div class="viewObject-mark right top"></div>
            <div class="viewObject-mark left bottom"></div>
            <div class="viewObject-mark right bottom"></div>
            <div class="viewObject-mark left middle"></div>
            <div class="viewObject-mark right middle"></div>
            <div class="viewObject-mark bottom middle"></div>
            <div class="viewObject-mark top middle"></div>
        `);
        this.el.selectLine.mousedown((e) => {
            e.stopPropagation();
            var _left = this.basic.position.left;
            var _top = this.basic.position.top;
            moveEvent(e, (left, top) => {
                e.stopPropagation();
                this.basic.position.left = _left + (left / this.viewObject.scale);
                this.basic.position.top = _top + (top / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.bottom.right').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            var height = this.basic.size.height;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                if (e.shiftKey) {
                    var _num = Math.max(left, top);
                    this.basic.size.width = width + (_num / this.viewObject.scale);
                    this.basic.size.height = height + (_num / this.viewObject.scale);
                } else {
                    this.basic.size.width = width + (left / this.viewObject.scale);
                    this.basic.size.height = height + (top / this.viewObject.scale);
                };
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.bottom.left').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            var height = this.basic.size.height;
            var _left = this.basic.position.left;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                // 缺少 shift 按键事件
                this.basic.size.width = width - (left / this.viewObject.scale);
                this.basic.size.height = height + (top / this.viewObject.scale);
                this.basic.position.left = _left + (left / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.top.left').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            var height = this.basic.size.height;
            var _left = this.basic.position.left;
            var _top = this.basic.position.top;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                // 缺少 shift 按键事件
                this.basic.size.width = width - (left / this.viewObject.scale);
                this.basic.size.height = height - (top / this.viewObject.scale);
                this.basic.position.left = _left + (left / this.viewObject.scale);
                this.basic.position.top = _top + (top / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.top.right').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            var height = this.basic.size.height;
            var _left = this.basic.position.left;
            var _top = this.basic.position.top;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                // 缺少 shift 按键事件
                this.basic.size.width = width + (left / this.viewObject.scale);
                this.basic.size.height = height - (top / this.viewObject.scale);
                this.basic.position.top = _top + (top / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.middle.right').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                this.basic.size.width = width + (left / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.middle.bottom').mousedown((e) => {
            e.stopPropagation();
            var height = this.basic.size.height;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                this.basic.size.height = height + (top / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.middle.left').mousedown((e) => {
            e.stopPropagation();
            var width = this.basic.size.width;
            var _left = this.basic.position.left;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                this.basic.size.width = width - (left / this.viewObject.scale);
                this.basic.position.left = _left + (left / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
        this.el.selectLine.find('.middle.top').mousedown((e) => {
            e.stopPropagation();
            var height = this.basic.size.height;
            var _top = this.basic.position.top;
            moveEvent(e, (left, top, e) => {
                e.stopPropagation();
                this.basic.size.height = height - (top / this.viewObject.scale);
                this.basic.position.top = _top + (top / this.viewObject.scale);
            }, (e) => {
                e.stopPropagation();
            });
        });
    }
    showSelect() {
        this.el.selectLine.show();
        this.el.SelectView.hide();
    }
    hideSelect() {
        this.el.selectLine.hide();
        this.el.SelectView.attr('style', '');
    }
    setPosition(left, top) {
        var vOffset = this.viewObject.viewerBoard.offset();
        var vleft = (left - vOffset.left) / this.viewObject.scale;
        var vtop = (top - vOffset.top) / this.viewObject.scale;
        this.basic.position.left = vleft - 50;
        this.basic.position.top = vtop - 50;
    }
    init() {
        bandObject(this.basic, 'object', (v) => {
            this.el.html.css({ 'opacity': v });
        });
        bandObject(this.basic, 'content', (v) => {
            this.el.content.content.text(v);
        });
        bandObject(this.basic.position, 'top', (v) => {
            this.el.html.css('transform', 'translateY(' + v + 'px) translateX(' + this.basic.position.left + 'px)');
        });
        bandObject(this.basic.position, 'left', (v) => {
            this.el.html.css('transform', 'translateY(' + v + 'px) translateX(' + this.basic.position.top + 'px)');
        });
        for (const key in this.basic.size) {
            bandObject(this.basic.size, key, (v) => {
                this.el.html[key](v);
            });
        };
        this.basic.size.width = 100;
        this.basic.size.height = 100;
        bandObject(this.basic, 'commonStyle', (v) => {
            this.el.html.attr('class', v.join(' '));
        });
    }
}
export default viewObject
